<template>
  <div class="app-container">
    <el-card shadow="hover">
    <div>
      <div class="article">{{ dynamicMain.dynamicTitle }}</div>
      <div class="createBy">
        <div class="createBy"><span class="font">发布时间：{{dynamicMain.createTime}}</span><span class="font">发布人：{{dynamicMain.createBy}}</span>
          <el-tag effect="dark" size="medium" type="success">院内动态</el-tag>
        </div>
      </div>
    </div>
    <div class="">
      <div
        class="dynamic"
        v-html="dynamicMain.dynamicContent"
        data-slate-editor
      ></div>
    </div>
    </el-card>
  </div>
</template>

<script>
import { getDynamic } from "@/api/dynamic/dynamic";
import { deptTreeSelect } from "@/api/system/user";
import "@wangeditor/editor/dist/css/style.css";

export default {
  name: "dynamic",
  data() {
    return {
      // 遮罩层
      loading: true,
      dynamicId: null,
      dynamicMain: {},
    };
  },
  created() {
    const dynamicId = this.$route.params && this.$route.params.dynamicId;
    this.getDynamicById(dynamicId);
  },

  methods: {
    getDynamicById(dynamicId) {
      getDynamic(dynamicId).then((res) => {
        this.dynamicMain = res.data;
        console.log(this.dynamicMain);
      });
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      let html = editor.getHtml();

      // 创建一个新的DOM解析器
      let parser = new DOMParser();

      // 使用解析器解析HTML字符串
      let doc = parser.parseFromString(html, "text/html");

      // 获取所有的表格元素
      let tables = doc.getElementsByTagName("table");

      // 遍历所有的表格元素并添加边框样式
      for (let i = 0; i < tables.length; i++) {
        tables[i].style.borderTop = "1px solid #ccc";
        tables[i].style.borderLeft = "1px solid #ccc";

        // 获取表格中的所有td和th元素
        let cells = tables[i].querySelectorAll("td, th");

        // 遍历所有的td和th元素并添加边框样式
        for (let j = 0; j < cells.length; j++) {
          cells[j].style.borderBottom = "1px solid #ccc";
          cells[j].style.borderRight = "1px solid #ccc";
          cells[j].style.padding = "3px 5px";
          cells[j].style.textAlign = "center";
        }

        // 获取表格中的所有th元素并添加边框样式
        let ths = tables[i].querySelectorAll("th");
        for (let k = 0; k < ths.length; k++) {
          ths[k].style.borderBottom = "1px solid #ccc";
        }
      }

      // 将修改后的HTML内容转换回字符串
      html = new XMLSerializer().serializeToString(doc);

      // 更新编辑器的HTML内容
      this.html = html;
    },
  },
};
</script>

<style lang="scss" scoped>
.article-type-img {
  width: 36px;
  height: 32px;
  line-height: 32px;
}

.article {
  font-size: 28px;
  word-wrap: break-word;
  color: #222226;
  font-weight: 600;
  margin: 0;
  word-break: break-all;
}

.noticeTitle {
  font-size: 28px;
  word-wrap: break-word;
  color: #222226;
  font-weight: 600;
  margin: 0;
  word-break: break-all;
}

.notice {

  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.createBy {
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 20px;
  padding: 2px;
  display: flex;
  position: relative;
  align-items: center;
  background: #f8f8f8;
  border-radius: 4px;

  .font {
    padding: 5px;
    color: #999aaa;
    margin-right: 20px;
  }

}

/* table 样式 */
.notice.table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.notice.table td,
.notice.table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}

.notice.table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.notice.blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}
</style>

